<template>
  <div class="detail" v-if="recipe">
      <van-nav-bar  left-arrow 
        @click-left="onClickLeft" 
        @click-right="onClickRight"
        :fixed="true"
        right-text="搜索"
        :border="false"
        :class="{navBar:start}"
        z-index="100"
        >
        <template #left>
            <van-icon name="arrow-left" size="20"/>
        </template>
        <template #title>
            <div class="top" v-if="artist_show">
                <van-image
                    width="30"
                    height="30"
                    :src="recipe.user.p || recipe.user.user_photo"
                    :round="true"
                />
                <div class="guanzhu">关注</div>
            </div>
        </template>
        <template #right>
            <van-row gutter="20">
                <van-col span="8">
                    <svg t="1637657972998" class="icon" v-if="!start" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3275" width="25" height="25">
                    <path d="M870.532 360.53a391.791 391.791 0 0 0-7.61-16.863c-0.024-0.045-0.04-0.092-0.064-0.138-18.996-39.556-44.406-75.375-75.71-106.679-35.729-35.73-77.34-63.784-123.679-83.383C615.483 133.17 564.522 122.88 512 122.88s-103.483 10.291-151.47 30.587c-46.337 19.6-87.95 47.654-123.679 83.383-35.73 35.73-63.784 77.342-83.383 123.68C133.17 408.517 122.88 459.478 122.88 512s10.291 103.483 30.588 151.47a391.791 391.791 0 0 0 7.61 16.863c0.024 0.045 0.04 0.092 0.064 0.138 18.996 39.556 44.406 75.375 75.71 106.679 35.729 35.73 77.34 63.784 123.679 83.383C408.517 890.83 459.478 901.12 512 901.12s103.483-10.291 151.47-30.587c46.337-19.6 87.95-47.654 123.679-83.383 35.73-35.73 63.784-77.342 83.383-123.68C890.83 615.483 901.12 564.522 901.12 512s-10.291-103.483-30.588-151.47zM163.84 512c0-35.225 5.206-69.647 15.235-102.4h232.693c-0.386 0.333-0.773 0.664-1.139 1.03L186.154 635.103c-14.646-38.82-22.314-80.37-22.314-123.104z m245.76 0c0-56.463 45.937-102.4 102.4-102.4S614.4 455.537 614.4 512 568.463 614.4 512 614.4 409.6 568.463 409.6 512z m203.77 101.37l224.476-224.474c14.646 38.82 22.314 80.37 22.314 123.104 0 35.225-5.206 69.647-15.235 102.4H612.232c0.386-0.333 0.773-0.664 1.139-1.03z m144.817-347.556c24.908 24.908 45.567 52.93 61.635 83.18l-164.48 164.48c0.005-0.491 0.018-0.98 0.018-1.474V194.544c37.807 17.093 72.609 41.053 102.827 71.27zM614.4 179.075v232.693c-0.333-0.386-0.663-0.773-1.03-1.139L388.897 186.154c38.82-14.646 80.37-22.314 123.104-22.314 35.225 0 69.647 5.206 102.4 15.235z m-348.587 86.739c24.908-24.908 52.93-45.567 83.18-61.635l164.482 164.48c-0.492-0.006-0.981-0.019-1.475-0.019H194.544c17.093-37.807 41.052-72.609 71.269-102.826z m0 492.372c-24.908-24.908-45.567-52.93-61.635-83.18l164.48-164.48c-0.005 0.491-0.018 0.98-0.018 1.474v317.456c-37.807-17.093-72.609-41.053-102.827-71.27zM409.6 844.925V612.232c0.333 0.386 0.663 0.773 1.03 1.139l224.474 224.475c-38.82 14.646-80.37 22.314-123.104 22.314-35.225 0-69.647-5.206-102.4-15.235z m348.587-86.739c-24.908 24.908-52.93 45.567-83.18 61.635L510.524 655.34c0.492 0.006 0.981 0.019 1.475 0.019h317.456c-17.093 37.807-41.052 72.609-71.269 102.826z" p-id="3276" fill="#ffffff"></path>
                    </svg>
                    <svg t="1637721792003" class="icon" v-else viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4877" width="25" height="25">
                    <path d="M254.839467 405.353813l0.41984-0.416427-0.423253-0.006827L254.839467 405.353813zM768.546133 402.37056l0 0.59392 0.3072-0.300373L768.546133 402.37056zM405.026133 770.628267l0.416427 0-0.416427-0.41984L405.026133 770.628267zM404.309333 254.921387l0.59392 0-0.293547-0.300373L404.309333 254.921387zM619.147947 253.228373l-0.426667 0 0.41984 0.4096L619.147947 253.228373zM255.290027 619.502933l0-0.597333-0.293547 0.300373L255.290027 619.502933zM617.8304 770.542933l-0.590507 0 0.300373 0.293547L617.8304 770.542933zM512.044373 68.266667C266.94656 68.266667 68.266667 266.922667 68.266667 512c0 245.0944 198.679893 443.743573 443.777707 443.743573 245.05344 0 443.682133-198.656 443.682133-443.74016C955.733333 266.92608 757.108053 68.27008 512.044373 68.266667L512.044373 68.266667zM673.549653 430.6944 673.549653 129.9456c33.49504 14.189227 65.4848 33.051307 95.010133 56.507733 12.066133 9.58464 23.763627 19.85536 34.925227 31.020373 26.112 26.112 47.83104 54.920533 65.399467 85.476693 4.427093 7.68 8.567467 15.479467 12.485973 23.360853l-207.796907 207.783253c2.030933-12.537173 2.6112-25.245013 1.655467-37.881173-0.361813-4.77184-0.925013-9.5232-1.693013-14.267733L673.536 430.6944 673.549653 430.6944zM466.05312 100.53632c15.305387-1.757867 30.839467-2.7648 46.626133-2.7648 36.932267 0 72.6528 5.024427 106.69056 14.19264 8.56064 2.304 17.001813 4.881067 25.344 7.69024l0 293.860693c-7.441067-10.294613-16.001707-19.705173-25.613653-27.9552-3.628373-3.11296-7.389867-6.075733-11.281067-8.884907l-36.2496-36.2496-17.155413-17.169067-195.508907-195.488427C392.628907 114.11456 428.571307 104.83712 466.05312 100.53632L466.05312 100.53632zM188.388693 254.907733C197.973333 242.838187 208.247467 231.144107 219.409067 219.979093c26.118827-26.112 54.92736-47.827627 85.480107-65.399467 7.68-4.427093 15.479467-8.574293 23.360853-12.4928l207.79008 207.796907c-12.537173-2.02752-25.2416-2.62144-37.881173-1.65888-4.768427 0.361813-9.530027 0.9216-14.260907 1.686187L131.88096 349.91104C146.080427 316.416 164.93568 284.43648 188.388693 254.907733L188.388693 254.907733zM102.150827 558.025387c-1.757867-15.3088-2.7648-30.84288-2.7648-46.629547 0-36.932267 5.0176-72.6528 14.19264-106.69056 2.300587-8.56064 4.881067-17.005227 7.686827-25.340587l293.86752 0c-10.294613 7.43424-19.70176 16.001707-27.962027 25.61024-3.11296 3.631787-6.075733 7.389867-8.884907 11.281067l-36.2496 36.256427-17.169067 17.152-195.495253 195.508907C115.725653 631.43936 106.441387 595.493547 102.150827 558.025387zM350.293333 591.18592l0 300.745387c-33.50528-14.206293-65.488213-33.06496-95.01696-56.517973-12.069547-9.591467-23.763627-19.85536-34.92864-31.0272-26.112-26.108587-47.827627-54.930773-65.399467-85.469867-4.427093-7.68-8.574293-15.48288-12.485973-23.36768l207.783253-207.786667c-2.024107 12.53376-2.618027 25.2416-1.655467 37.87776 0.3584 4.768427 0.9216 9.5232 1.682773 14.260907l0 51.27168L350.293333 591.18592zM512 378.067627c73.966933 0 133.932373 59.962027 133.932373 133.932373 0 73.977173-59.962027 133.9392-133.932373 133.9392-73.966933 0-133.9392-59.962027-133.9392-133.9392C378.0608 438.033067 438.033067 378.07104 512 378.067627L512 378.067627zM558.114133 923.306667c-15.305387 1.76128-30.839467 2.768213-46.626133 2.768213-36.932267 0-72.659627-5.021013-106.693973-14.19264-8.56064-2.300587-17.005227-4.881067-25.340587-7.686827l0-293.86752c7.43424 10.294613 15.99488 19.698347 25.61024 27.958613 3.6352 3.11296 7.39328 6.079147 11.28448 8.88832l36.2496 36.253013 17.155413 17.16224 195.498667 195.50208c-33.72032 13.63968-69.67296 22.930773-107.134293 27.221333L558.114133 923.306667zM833.754453 770.54976c-9.588053 12.066133-19.858773 23.763627-31.030613 34.92864-26.108587 26.108587-54.920533 47.827627-85.469867 65.399467-7.68 4.427093-15.479467 8.574293-23.364267 12.48256l-207.77984-207.796907c12.537173 2.02752 25.2416 2.62144 37.87776 1.655467 4.77184-0.361813 9.5232-0.925013 14.267733-1.686187L890.2656 675.5328C876.059307 709.04832 857.204053 741.02784 833.754453 770.54976L833.754453 770.54976zM902.836907 644.645547l-293.853867 0c10.2912-7.43424 19.698347-15.998293 27.9552-25.613653 3.11296-3.628373 6.07232-7.386453 8.874667-11.281067l36.25984-36.246187 17.158827-17.16224 195.495253-195.50208c13.653333 33.733973 22.930773 69.679787 27.231573 107.144533 1.757867 15.3088 2.768213 30.84288 2.768213 46.63296 0 36.932267-5.02784 72.6528-14.19264 106.687147C908.223147 627.858773 905.642667 636.30336 902.836907 644.645547L902.836907 644.645547zM769.28 619.06944l0-0.416427-0.423253 0.416427L769.28 619.06944z" p-id="4878" fill="#2c2c2c"></path>
                    </svg>
                </van-col>
                <van-col span="8">
                    <svg t="1637657319921" class="icon" v-if="!start" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2521" width="25" height="25">
                        <path d="M867.265306 867.265306c-3.134694 0-6.791837-1.044898-9.92653-2.612245l-54.857143-28.734694c-39.183673 20.37551-83.069388 31.346939-128.522449 31.346939-141.061224 0-256-102.922449-256-229.877551s114.938776-229.877551 256-229.877551 256 102.922449 256 229.877551c0 50.677551-18.808163 100.310204-53.289796 140.538776l10.971428 65.306122c1.567347 7.836735-2.089796 15.673469-8.359183 20.37551-3.657143 2.089796-7.836735 3.657143-12.016327 3.657143z m-193.306122-417.959184c-118.073469 0-214.204082 84.114286-214.204082 188.081633s96.130612 188.081633 214.204082 188.081633c42.318367 0 83.069388-10.971429 118.073469-31.346939 6.269388-3.657143 14.106122-3.657143 20.37551-0.522449l27.167347 14.106122-5.746939-33.436734c-1.044898-6.269388 1.044898-13.061224 5.22449-17.763266 31.346939-33.436735 49.110204-76.277551 49.110204-119.640816 0-103.444898-96.130612-187.559184-214.204081-187.559184z" p-id="2522" fill="#ffffff"></path><path d="M579.918367 579.395918m-31.346938 0a31.346939 31.346939 0 1 0 62.693877 0 31.346939 31.346939 0 1 0-62.693877 0Z" p-id="2523" fill="#ffffff"></path><path d="M768 579.395918m-31.346939 0a31.346939 31.346939 0 1 0 62.693878 0 31.346939 31.346939 0 1 0-62.693878 0Z" p-id="2524" fill="#ffffff"></path><path d="M292.571429 344.293878m-36.571429 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z" p-id="2525" fill="#ffffff"></path><path d="M512 344.293878m-36.571429 0a36.571429 36.571429 0 1 0 73.142858 0 36.571429 36.571429 0 1 0-73.142858 0Z" p-id="2526" fill="#ffffff"></path><path d="M166.138776 709.485714c-4.179592 0-8.881633-1.567347-12.538776-4.179592-6.269388-4.702041-9.404082-12.538776-8.359184-20.37551l14.106123-81.502041C117.028571 554.840816 94.040816 494.759184 94.040816 433.110204 94.040816 280.555102 232.489796 156.734694 402.285714 156.734694c80.979592 0 157.257143 27.689796 215.24898 78.889796 58.514286 51.2 91.428571 119.640816 92.995918 193.306122 0 5.746939-2.089796 11.493878-6.269388 15.67347s-9.926531 6.269388-15.673469 5.746938c-5.22449-0.522449-9.926531-0.522449-14.106122-0.522449-118.073469 0-214.204082 84.114286-214.204082 188.081633 0 14.106122 2.089796 28.734694 5.746939 42.840816 1.567347 5.746939 0.522449 12.016327-2.612245 17.240817s-8.881633 8.359184-14.628572 8.881632c-15.15102 2.089796-30.302041 3.134694-45.453061 3.134694-55.902041 0-109.714286-13.583673-157.257143-38.661224l-68.963265 36.571428c-4.179592 0.522449-7.836735 1.567347-10.971428 1.567347z m78.889795-83.591836c3.657143 0 7.314286 1.044898 10.44898 2.612244 48.587755 28.212245 106.057143 41.795918 164.571429 38.138776-1.567347-9.926531-2.089796-19.853061-2.089796-29.779592 0-124.865306 111.281633-226.742857 249.208163-229.877551-14.628571-117.028571-128.522449-208.979592-264.881633-208.979592-146.808163 0-266.44898 105.012245-266.448979 234.579592 0 54.334694 21.942857 107.62449 61.12653 149.420408 4.702041 4.702041 6.269388 11.493878 5.22449 17.763266l-8.359184 50.155102 41.795919-21.942858c3.134694-1.044898 6.269388-2.089796 9.404081-2.089795z" p-id="2527" fill="#ffffff"></path>
                    </svg>
                    <svg t="1637721723238" class="icon" v-else viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3153" width="25" height="25">
                    <path d="M506.942 345.921c25.259 0 42.134-16.916 42.134-42.107 0-25.477-16.848-41.956-42.134-41.956-25.299 0-50.668 16.48-50.668 41.956 0.028 25.204 25.409 42.107 50.668 42.107z m0 0z m-235.685-84.064c-25.259 0-50.79 16.48-50.79 41.956 0 25.19 25.532 42.107 50.79 42.107 25.163 0 42.012-16.916 42.012-42.107-0.014-25.477-16.834-41.956-42.012-41.956z m0 0z m739.397 353.635c0-133.202-123.563-246.702-275.237-258.512 0.205-1.652 0.301-3.373-0.068-5.092-30.406-141.79-182.886-248.695-354.7-248.695-194.15 0-352.119 135.387-352.119 301.793 0 89.279 45.574 169.725 131.946 233.158l-30.106 90.508a15.42 15.42 0 0 0 4.506 16.452 15.435 15.435 0 0 0 10.076 3.741c2.335 0 4.697-0.546 6.867-1.625l113.036-56.565 13.926 2.827c34.802 7.154 64.853 13.353 101.868 13.353 10.895 0 40.878-3.987 43.404-7.182 40.755 101.99 153.094 175.61 285.273 175.61 33.86 0 68.13-8.164 98.891-15.866l87.136 47.636c2.307 1.257 4.847 1.911 7.359 1.911 3.441 0 6.881-1.161 9.639-3.413 4.847-3.932 6.841-10.404 5.038-16.33L895.134 815.2c74.602-58.955 115.521-129.488 115.521-199.708zM409.798 665.75a338.345 338.345 0 0 1-29.082 1.243c-32.686 0-60.334-5.652-92.31-12.26l-18.582-3.755a14.266 14.266 0 0 0-9.503 1.269l-81.687 40.892 21.231-63.775c2.076-6.24-0.205-13.053-5.57-16.821-82.07-57.207-123.659-126.894-123.659-207.093 0-144.179 139.087-261.516 310.067-261.516 151.142 0 284.959 91.955 312.579 214.261-158.475 2.076-286.706 113.487-286.706 250.32 0 19.893 3.018 39.171 8.11 57.767-1.542-0.382-3.168-0.683-4.887-0.532z m450.573 122.949c-4.875 3.673-6.935 10.007-5.188 15.852l13.804 45.903-56.647-30.993a14.577 14.577 0 0 0-7.004-1.803c-1.188 0-2.389 0.15-3.564 0.464-30.379 7.674-61.822 15.593-92.433 15.593-142.186 0-257.857-97.717-257.857-217.811 0-120.095 115.658-217.771 257.857-217.771 139.469 0 257.325 99.724 257.325 217.771 0 59.87-37.738 121.255-106.291 172.797z m7.81 8.479zM616.454 506.006c-16.848 0-33.696 16.971-33.696 33.792 0 16.944 16.848 33.669 33.696 33.669 25.313 0 42.038-16.725 42.038-33.669 0-16.848-16.725-33.792-42.038-33.792z m0 0z m185.126 0c-16.603 0-33.451 16.971-33.451 33.792 0 16.944 16.848 33.669 33.451 33.669 25.231 0 42.257-16.725 42.257-33.669 0-16.848-16.998-33.792-42.257-33.792z m0 0z" p-id="3154" fill="#2c2c2c"></path>
                    </svg>
                </van-col>
                <van-col span="8">
                    <van-icon name="ellipsis" size="25"/>
                </van-col>
            </van-row>
        </template>
     </van-nav-bar>

      <div class="thumb" >
          <div v-if="recipe.vfurl"  style="background: rgb(41, 41, 43)" ref="nav">
            <video :src="recipe.vfurl" autoplay controls style="max-height: 70vh;" width="100%"></video>
          </div>
          <div v-else style="max-height: 70vh; overflow:hidden; display: flex; align-items: center;">
            <van-image               
                :src="recipe.photo_path"
                ref="navBar"
                @load="onLoad"
            />
          </div>
        <MenuDetailName :recipe="recipe"/>
        <div class="top" ref="artist">
            <ListsTop :list="recipe.user"/>
            <div class="guanzhu">关注</div>
        </div>
        <ListsText :list="recipe"/>
        <van-grid direction="horizontal" :column-num="2" :border="false" class="grid" v-if="recipe.cook_difficulty">
            <van-grid-item :icon="require('../assets/images/wait.png')" :text="recipe.cook_time" ></van-grid-item>
            <van-grid-item :icon="recipe.cook_difficulty_image" :text="recipe.cook_difficulty" />
        </van-grid>
        <MenuDetailFoodList :recipe="recipe"/>
        <MenuDetailAnalysis :recipe="recipe" v-if="recipe.energy"/>
        <MenuDetailStep :recipe="recipe"/>
      </div>
      <div class="tip" v-if="recipe.tips" ref="container">
          <van-sticky :container="container" offset-top="70">
            <p>小贴士</p>
          </van-sticky>
          <!-- <div class="tip_text">{{recipe.tips}}</div> -->
          <div v-html="text" class="tip_text" ></div>
      </div>
     <div class="com" v-if="all">
         <p>
             <span class="hot_com">热门评论</span>
             <span class="hot_count">{{all}}条评论</span>
         </p>
         <Comment 
            v-for="(comment,index) in comments" 
            :key="index"
            :author="recipe.user.user_id"
            :comment="comment"
        />
        <p class="watchAll" @click="showComment">查看全部{{all}}条评论</p>
     </div>

     <van-action-sheet v-model="show" title="全部评论">
      <div class="content1">
          <Loading v-if="!contents"/>
          <Comment 
            v-for="(comment,index) in contents" 
            :key="index"
            :author="recipe.user.user_id"
            :comment="comment"
        />
      </div>
    </van-action-sheet>
  </div>
</template>

<script>

import _ from "lodash"
import loading from "../assets/images/loading.gif"
import { getFoodDetail,getComment } from "@/apis/index";
import MenuDetailName from "@/components/MenuDetailName.vue"
import ListsTop from "@/components/ListsTop.vue"
import ListsText from "@/components/ListsText.vue"
import MenuDetailFoodList from "@/components/MenuDetailFoodList.vue"
import MenuDetailAnalysis from "@/components/MenuDetailAnalysis.vue"
import MenuDetailStep from "@/components/MenuDetailStep.vue"
import Comment from "@/components/Comment.vue"
import Loading from "@/components/Loading.vue"


export default {
name:"MenuDetail",
components:{
    MenuDetailName,
    ListsTop,
    ListsText,
    MenuDetailFoodList,
    MenuDetailAnalysis,
    MenuDetailStep,
    Comment,
    Loading
},
data: function() {
    return{
        recipe: null,
        start: false,
        container: null,
        navHeight:null,
        artist_top: null,
        artist_show:false,
        text: null,
        comments: null,
        all: null,
        show: false,
        contents: null,
    }
},
created: async function () {
    this.toToast();
    this.recipe = (await getFoodDetail(this.$route.query.id)).data.result.recipe;
    if(this.recipe.vfurl){
        this.$toast.clear();
        this.$nextTick(() => {
                this.navHeight = this.$refs.nav.clientHeight;
                this.artist_top = this.$refs.artist.offsetTop
              });
    }
    if(this.recipe.tips){
                this.text = this.recipe.tips.replaceAll("\n","<br/>");
                this.text = this.text.replaceAll(" ","&nbsp;");
            }
    // this.comments = (await getComment(this.$route.query.id,0)).data.result.comments.slice(0,3);
    getComment(this.$route.query.id,0).then( res => {
        this.comments = res.data.result.comments.slice(0,3);
        this.all = res.data.result.cc;
    })
},
mounted(){
    window.addEventListener( "scroll" , this.onScroll);
},
destroyed: function(){
    window.removeEventListener( "scroll", this.onScroll);
},
watch:{
    
},

 methods:{
    showComment: async function(){
        this.show = true;
        this.contents = (await getComment(this.$route.query.id,0)).data.result.comments;
    },
    toToast: function(){
        this.$toast({
            icon: loading,
            duration: 20000,
            overlay: true,
        });
    },
    onLoad:  function(){
        this.navHeight = this.$refs.navBar.$el.clientHeight
        this.container = this.$refs.container;
        this.artist_top = this.$refs.artist.offsetTop;
        this.$toast.clear();
        // console.log(this.$refs.navBar);
        // console.log(this.navHeight, this.artist_top);
        
    },
    onClickLeft(){
      this.$router.go(-1)
    },
    onClickRight(){
      console.log(2);
    },
    onScroll: _.throttle(function(){   
        var y = window.pageYOffset;
        if(y>0){
            if( y >= this.navHeight*0.8 ){
                this.start = true;
            }
            else{
                this.start = false;
            }
            if(y >= this.artist_top){
                this.artist_show = true;
            }
            else{
                this.artist_show = false;
            }
        }
    }, 200),
  },
}
</script>

<style lang="less" >
body{
    // background-color: white;
    .van-overlay{
        background-color: white;
    }
    .van-toast{
        background-color: rgba(228, 222, 223, 0.678);
        .van-icon{
            .van-icon__image{
                width: 3em;
                height: 2em;
                object-fit: cover;
            }
        }
    }
}
.detail{
    .van-action-sheet__content{
        margin-bottom: 15px;
    }
    .van-overlay {
        background-color: rgba(0,0,0,.7);
    }
    .content1 {
        // padding: 16px 16px 160px;
        height: 50vh;
    }
    .com{
        margin-top: 15px;
        padding-bottom: 20px;    
        .hot_com{
            // font-size: 16px;
            font-weight: 600;
            margin-left: 15px;
        }
        .hot_count{
            font-size: 15px;
            margin-left: 10px;
            color: #50969f;
        }
        .watchAll{
            text-align: center;
            color: #50969f;
            font-size: 15px;
        }
    }
    .thumb{
        video{
            vertical-align: bottom;
        }
    }
    .grid{
        .van-grid-item__text{
            font-size: 18px;
            line-height: 28px;
            color: black;
            font-weight: 600;
        }
        .van-grid-item__icon {
            font-size: 23px;
        }
    }
    .van-nav-bar{
        background: linear-gradient(to bottom,  #161515a8 0%,#ffffff00 100%);
        .van-nav-bar__content{
            height:70px;
            .van-icon,.van-nav-bar__text{
                color: white;
            }
            .van-nav-bar__title{
                width: 134px;
                margin-left: 70px;
            }
        }
    }
    .navBar{
        background:rgb(255, 255, 255) ;
        border-bottom: 1px solid rgba(252, 248, 248, 0.699);
        .van-nav-bar__content{
            .van-icon,.van-nav-bar__text{
                color: black;
            }
        }
    }
    .top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .guanzhu{
            width: 70px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: orange;
            border-radius: 25px;
            font-size: 12px;
            font-weight: 550;
            margin-right: 15px;
        }
    }
    .tip{
        margin-top: 20px;
        p{
            height: 40px;
            line-height: 40px;
            margin: 0 15px;
            font-weight: 600;
            background-color: white;
       }
       .tip_text{
           margin: 0 15px;
           margin-bottom: 15px;
            line-height: 30px;

       }
    }
}
</style>